import React from 'react'
import { View } from '@tarojs/components'
import './item.scss'
import classnames from '../../utils/classnames'
import cls from 'classnames'
import { Icon } from '../Icon'
import { Info } from '../Info'

export interface ITabbarProps {
    title: string
    icon: string
    tabUrl?: string
    selected: boolean
    dot?: boolean,
    info?: string
    alone?: boolean
    onTrigger: (tabUrl?: string)=> void
}

export const TabBarItem: React.FC<ITabbarProps> =
    ({ title, icon, selected, dot, info, alone, tabUrl, onTrigger }) => {
        return (
            <View
                className={classnames('tabbar-item', [{ 'active': selected }])}
                onClick={()=> onTrigger(tabUrl)}
            >
                <View className={cls("tabbar-item__icon", {"tabbar-item__alone": alone })}>
                    <Icon
                        name={icon}
                        size={24}
                    />
                    <Info dot={dot} info={info} />
                </View>
                <View className={cls('tabbar-item__title', {'tabbar-item__title--alone':alone })}>{title}</View>
            </View>
        )
    }